<template>
	<view class="babioc">
		<view class="babox">
			<view class="" style="font-size: 20px;">￥{{user.hasmoney}}</view>
			<view class="textaa">账户余额可在平台或场馆使用，可随时充值</view>
		</view>
		<view class="tetit">
			明细
		</view>
		<view style="text-align: center;" v-if="list.length <= 0" class="intext">--暂无明细--</view>
		<view class="monebox" v-for="(item,index) in list" :key="index">
			<view class="monetit">
				<view class="">{{item.change_type}}</view>
				<view class="">{{formatMoney(item)}}{{item.money}}</view>
			</view>
			<view class="monetime">
				<view class="">{{item.createtime}}</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref,onMounted } from 'vue';

	import {onReachBottom} from '@dcloudio/uni-app'
import request from '../../utils/request';
let user=ref()
let token=ref('')
let list =ref([])
let page = ref(1)
let last_page = ref(1)
onMounted(()=>{
	user.value=uni.getStorageSync('userinfo')
	token.value=uni.getStorageSync('token')
	getData()
})

onReachBottom(() => {
	if(page.value == last_page.value){
		uni.$u.toast('已经是最后一页了')
	}else{
		page.value++
		getData()
	}
})


const getData = () => {
	if (page.value == 1) {
		list.value = []
	}
	request.post('User/moneyChanges', {
		data: {
			moneytype:'1',
			page_size:'15',
			changetype:'-1'
		},
		header: {
			"token": token.value,
			'Content-Type': 'application/json'
		}
	}).then(res => {
		last_page.value = res.data.last_page
		if (res.code == 1) {
			res.data.data.forEach((item,index) => {
				list.value.push(item)
			})
		} else {
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}
	}).catch(err => {
		console.log(err);
	})
}

const formatMoney = (item) => {
  const symbol = item.record_type === 0 ? '-' : '+';
  return `${symbol}`;
}
</script>

<style scoped>
	.babioc{
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
	}
	.babox{
		width: 710rpx;
		height:220rpx;
		background-color:#fff;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}
	.textaa{
		font-size: 12px;
		color: #707070;
	}
	.tetit{
		margin-top: 40rpx;
		padding-left: 20px;
		font-size: 14px;
		color: #707070;
	}
	.monebox{
		width: 690rpx;
		height: 190rpx;
		border-bottom: 1px solid #d6d6d6;
		margin: 0 auto;
	}
	.monetit{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 13px;
		height: 100rpx;
	}
	.monetime{
		height: 80rpx;
		font-size: 12px;
		color: #888888;
		display: flex;
		align-items: center;
	}
</style>
